<template>
	<view class="confirmorder-page bgF8F8F8">
		<u-navbar :title="$t('hhh.t88')" :autoBack="false" bg-color="#fff" leftIconColor="#000"
			:titleStyle="{'color':'#000'}" @leftClick="leftClick"></u-navbar>

		<u-gap height="100" bgColor="transparent"></u-gap>

		<view class="bg-white p-2 flex align-center mx-2 rounded-lg mb-2">
			<image class="rounded" src="/static/imgs/player1.jpg" mode="aspectFill" style="width: 176rpx;height: 176rpx;">
			</image>
			<view class="flex flex-column flex-1 ml-2">
				<view class="flex align-center">
					<text class="fs-32 text-black font-weight-light">{{detail.nickname}}</text>
					<image v-if="detail.is_verified === 1" src="/static/imgs/renzheng.png" mode="aspectFill"
						class="w-32 h-32 ml-1">
					</image>
					<image v-if="detail.nationality && detail.nationality.logo" :src="detail.nationality.logo" mode="aspectFill"
						class="w-32 h-32 ml-1 rounded-circle flex-shrink"></image>
					<view class="flex align-center bgFF4CBE rounded-circle px-1 ml-1">
						<image :src="`/static/imgs/${detail.gender === 2?'sex':'sex1'}.png`" mode="aspectFill"
							style="width: 20rpx;height: 20rpx;"></image>
						<text class="text-white fs-20">{{detail.age}}</text>
					</view>
					<view class="flex align-center flex-1 justify-end">
						<image src="/static/imgs/hot_icon.png" mode="aspectFill" class="w-36 h-36"></image>
						<text class="ftFF685E fs-26 font-weight-light">{{abbreviateNumber(detail.fire_balance)}}</text>
					</view>
				</view>
				<view class="flex align-center mt-2">
					<view class="rounded px-1 py-05 bgD5EDF8 flex align-center ">
						<image :src="interests.icon" mode="aspectFill" class="w-32 h-32"></image>
						<text class="ft666666 fs-22">{{interests.name}}</text>
					</view>
				</view>
				<view class="flex align-center justify-between mt-3">
					<view class="flex align-center">
						<view class="flex align-center ftFF0073">
							<text class="fs-34 font-weight-light">{{detail.price}}</text>
							<image src="/static/imgs/jinbi.png" mode="aspectFill" class="w-28 h-28 mx-1"></image>
						</view>
						<text class="fs-24 text-black letter-spacing ml-1">/ {{$t('hhh.t7')}}</text>
					</view>
					<text>x{{detail.num}}</text>
				</view>
			</view>
		</view>

		<view class="bg-white px-2 py-3  mx-2 rounded-lg">
			<view class="flex align-center justify-between fs-28 text-black mb-3">
				<text>{{$t('hhh.t89')}}</text>
				<view class="flex align-center fs-28 text-black">
					<text>{{toalPrice}}</text>
					<image src="/static/imgs/jinbi.png" mode="aspectFill" class="w-28 h-28 ml-1"></image>
				</view>
			</view>
			<view class="flex align-center justify-between fs-28 text-black border-bottom pb-3">
				<text>{{$t('hhh.t90')}}</text>
				<view class="flex align-center fs-28 text-black">
					<text>-{{couponPrice}}</text>
				</view>
			</view>
			<view class="flex align-center justify-end fs-28 text-black pt-3">
				<text>{{$t('hhh.t91')}}:</text>
				<text class="ftFF0073 font-weight-bold ml-1">{{settlementPrice}}</text>
				<image src="/static/imgs/jinbi.png" mode="aspectFill" class="w-28 h-28 ml-1"></image>
			</view>
		</view>

		<view class="bg-white px-2 py-3  mx-2 rounded-lg mt-3">
			<view class="flex align-center justify-between fs-28 text-black pb-3 mb-2">
				<text>{{$t('hhh.t92')}}</text>
				<view class="flex align-center fs-28 text-black">
					<text>{{detail.selectDate || '--'}}</text>
				</view>
			</view>
			<view class="flex align-center justify-between fs-28 text-black">
				<text>{{$t('hhh.t64')}}</text>
				<view class="flex align-center fs-28 text-black">
					<text>{{detail.selectTime || '--'}}</text>
				</view>
			</view>
		</view>

		<u-gap height="100" bgColor="transparent"></u-gap>

		<view
			class="flex align-center justify-between bg-white py-2 border-top position-fixed left-0 right-0 bottom-0 px-3">
			<view class="flex align-center fs-28 text-black pt-3">
				<text>{{$t('hhh.t91')}}:</text>
				<text class="ftFF0073 font-weight-bold ml-1">{{settlementPrice}}</text>
				<image src="/static/imgs/jinbi.png" mode="aspectFill" class="w-28 h-28 ml-1"></image>
			</view>
			<view class="fs-32 font-weight-bold bg110124 px-5 py-2 text-white rounded-circle" @tap="submitOrder">
				{{$t('hhh.t31')}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		abbreviateNumber
	} from '@/utils/common.js'
	import HttpApi from '@/api/httpApi';
	export default {
		data() {
			return {
				detail: {},
				interests: {},
				couponPrice: 0,
				coupon: {}
			}
		},
		computed: {
			toalPrice() {
				return this.detail.num * this.detail.price || 0
			},
			settlementPrice() {
				return this.toalPrice - this.couponPrice || 0
			}
		},
		onLoad() {
			const detail = uni.getStorageSync('confirmOrderInfo')
			if (detail) {
				this.detail = detail
				this.interests = detail.interests.find(i => i.id === detail.service_type)
				this.getCouponBest()
			} else {
				uni.$tools.toast(this.$t('hhh.t85'))
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}, 1500)
			}
		},
		onUnload() {
			uni.removeStorageSync('confirmOrderInfo')
		},
		methods: {
			abbreviateNumber,
			getCouponBest() {
				HttpApi.getCouponBest({
					amount: this.toalPrice
				}).then(res => {
					if (res.code === 1) {
						this.coupon = res.data
						this.couponPrice = Number(res.data.discount_amount)
					}
				})
			},
			submitOrder() {
				HttpApi.orderCreate({
					peipei_id: this.detail.peipei_id,
					service_type: this.detail.service_type,
					hours: this.detail.num,
					appointment_time: `${this.detail.selectDate} ${this.detail.selectTime} `,
					from_cart: this.detail.from_cart,
					coupon_id: this.coupon.id || null
				}).then(res => {
					if (res.code === 1) {
						uni.$tools.toast(this.$t('hhh.t86'))
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/order/order'
							})
						}, 1500)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.confirmorder-page {
		min-height: 100dvh;
	}
</style>